<template>
  <div class="map-wrap">
    <div class="map">
      <el-amap
        :center="mapOptions.center"
        :zoom="mapOptions.zoom"
        :zooms="mapOptions.zooms"
        mapStyle="amap://styles/darkblue"
        :rotateEnable="false"
        :keyboardEnable="false"
      >
        <!-- 点标记 -->
        <el-amap-marker
          v-for="(l, i) in markerList"
          :position="l.position"
          :key="`el-amap-marker${i}`"
          :icon="markerIcon"
          @mouseover="showInfo(l)"
          @mouseout="hideInfo"
        />

        <!-- 信息窗体 -->
        <el-amap-info-window
          :position="infoPosition"
          :visible="infolVisible"
          isCustom
        >
          <div class="info-wrap">
            <div class="locate">
              <img src="@/assets/longscreen3/locate.png" class="img" alt="" />
              <p class="text">{{ infoData.projectName }}</p>
            </div>
            <div class="sides">
              <p class="data">
                <span class="val">{{ infoData.mro }}</span>
                <span class="unit">元</span>
              </p>
              <p class="key">直采交易总金额</p>
            </div>
            <div class="line"></div>
            <div class="sides">
              <p class="data">
                <span class="val">{{ infoData.mall }}</span>
                <span class="unit">元</span>
              </p>
              <p class="key">大宗交易总金额</p>
            </div>
          </div>
        </el-amap-info-window>

        <!-- 行政区划图 -->
        <el-amap-layer-district
          type="Country"
          :zIndex="2"
          :depth="1"
          :opacity="1"
          :styles="districtStyle"
        />
      </el-amap>
    </div>
    <div class="map-mask"></div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ajax } from "@/store/service";

const mapOptions = ref({
  zooms: [3, 22],
  center: [106.557056, 29.647725], //地图中心
  zoom: 5,
});

const markerIcon = ref(require("@/assets/longscreen3/icon_point.png"));
const markerList = ref([]);

const getMapData = async () => {
  const res = await ajax.getProjectMapData();
  markerList.value = res.map((l, i) => {
    const position = l.coordinate.split(",");
    return { ...l, position };
  });
};
getMapData();

// 信息窗体
const infoPosition = ref([0, 0]);
const infolVisible = ref(false);
const infoData = ref({});

const showInfo = (item) => {
  infoPosition.value = item.position;
  infoData.value = item;
  infolVisible.value = true;
};

const hideInfo = () => {
  infolVisible.value = false;
};

// 行政区划图样式
const districtStyle = ref({
  // 填充色
  fill: "RGBA(30, 62, 83, 1)",
  // 省界颜色
  "province-stroke": "RGBA(183, 231, 245, 1)",
  // 国境线颜色
  "nation-stroke": "RGBA(183, 231, 245, 1)",
  // 描边线宽
  "stroke-width": 1.5,
  //海岸线
  "coastline-stroke": "RGBA(183, 231, 245, 1)",
});
</script>


<style scoped lang='scss'>
.map-wrap {
  width: 1229px;

  .map {
    position: fixed;
    width: 4160px;
    left: 0;
    top: 103px;
    height: 977px;
    background-color: #000;
    .info-wrap {
      width: 424px;
      height: 170px;
      background: #0e1953;
      box-shadow: inset 0px 0px 23px 0px #06a4da;
      display: flex;
      padding: 5px;
      box-sizing: border-box;
      flex-wrap: wrap;
      justify-content: space-between;

      .locate {
        width: 414px;
        height: 60px;
        box-shadow: inset 0px 0px 33px 0px rgba(50, 197, 255, 0.63);
        margin: 0 auto;
        display: flex;
        align-items: center;
        .img {
          height: 19px;
          margin-left: 17px;
          margin-right: 15px;
        }
        .text {
          font-family: SourceHanSansCN, SourceHanSansCN;
          font-weight: 400;
          font-size: 16px;
          color: #ffffff;
          line-height: 20px;
          text-align: left;
          font-style: normal;
          margin-right: 17px;
        }
      }
      .sides {
        width: 200px;
        height: 60px;
        text-align: center;
        .data {
          .val {
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: bold;
            font-size: 24px;
            color: #ffffff;
            line-height: 36px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
          .unit {
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: 400;
            font-size: 16px;
            color: #ffffff;
            line-height: 24px;
            text-align: left;
            font-style: normal;
            margin-left: 4px;
          }
        }
        .key {
          font-family: SourceHanSansCN, SourceHanSansCN;
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
          line-height: 21px;
          text-align: left;
          font-style: normal;
          text-align: center;
        }
      }
      .line {
        height: 60px;
        border-left: 1px dashed #f3f3f3;
      }
    }
  }
  .map-mask {
    position: fixed;
    width: 4160px;
    background: url("@/assets/longscreen3/map_mask.png");
    background-size: 100% 100%;
    left: 0;
    top: 103px;
    height: 977px;
    z-index: 2;
    pointer-events: none; /* 这里添加 pointer-events 属性 */
  }
}
</style>